<template>
  <view class="invoice-detail">
    <CustomNavBar title="发票信息" backgroundColor="transparent" :placeholder="true"/>

    <!-- 顶部金额展示 -->
    <view class="amount-header">
      <text class="currency">¥</text>
      <text class="amount">{{ amount }}</text>
    </view>

    <!-- 悬浮抬头选择框（最外层） -->
    <view class="selector-box" @click="goTitleList">
      <text class="selector-label">抬头名称</text>
      <view class="selector-content">
        <text class="selector-value">{{ titleName }}</text>
        <uni-icons type="right" size="18" color="#BABABA"/>
      </view>
    </view>

    <!-- 内容分组卡片 -->
    <view class="card-section">
      <!-- 开票类型 -->
      <view class="row">
        <text class="label">开票类型</text>
        <view class="type-options">
          <view class="type-item" @click="setType('natural')">
            <RoundCheckbox :checked="invoiceType === 'natural'" :size="36" color="#1DCFB7"/>
            <text class="type-text">自然人</text>
          </view>
          <view class="type-item" @click="setType('nonNatural')">
            <RoundCheckbox :checked="invoiceType === 'nonNatural'" :size="36" color="#1DCFB7"/>
            <text class="type-text">非自然人</text>
          </view>
        </view>
      </view>

      <!-- 纳税人识别号 -->
      <view class="row">
        <text class="label">纳税人识别号</text>
        <text class="value">{{ taxpayerId }}</text>
      </view>

      <!-- 发票金额及明细（充电显示，停车隐藏） -->
      <view class="row column" v-if="!isParkingInvoice">
        <view class="row-line">
          <text class="label">发票金额</text>
          <text class="value">共{{ amount }}元</text>
        </view>
        <text class="sub-tip">(电费{{ powerFee }}元+服务费{{ serviceFee }}元)</text>
      </view>
    </view>

    <!-- 底部固定操作栏：金额一行 + 满宽圆角按钮 -->
    <view class="bottom-bar">
      <view class="bottom-amount-line">
        <text class="amount-label">发票金额：</text>
        <text class="amount-value">¥{{ amount }}</text>
      </view>
      <button class="submit-btn" @click="submitInvoice">开具发票</button>
    </view>
  </view>
</template>

<script setup>
import {ref} from 'vue'
import {onLoad} from '@dcloudio/uni-app'
import CustomNavBar from '@/components/CustomNavBar.vue'
import RoundCheckbox from '@/components/RoundCheckbox.vue'

const amount = ref('113.48')
const titleName = ref('深圳市一诺程实业有限公司')
const invoiceType = ref('nonNatural')
const taxpayerId = ref('0987654323456798765')
const powerFee = ref('89.99')
const serviceFee = ref('23.49')

// 是否为停车发票详情，用于条件隐藏充电专属明细
const isParkingInvoice = ref(false)

onLoad((options) => {
  const t = (options && (options.type || options.invoiceType || options.scene)) || ''
  isParkingInvoice.value = String(t).toLowerCase() === 'parking'
  // 根据传入金额覆盖显示
  const amt = options && options.amount
  if (amt !== undefined && amt !== null) {
    const n = Number(amt)
    amount.value = Number.isNaN(n) ? String(amt) : n.toFixed(2)
  }
})

const setType = (type) => {
  invoiceType.value = type
}

const goTitleList = () => {
  uni.navigateTo({url: '/pages/invoice/title-list'})
}

const submitInvoice = () => {
  uni.showToast({title: '已提交开票', icon: 'success'})
}
</script>

<style scoped>
.invoice-detail {
  min-height: 100vh;
  background-color: #FFFFFF;
}

.amount-header {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10 rpx;
  height: 225 rpx;
  padding-top: 40 rpx;
  background: linear-gradient(180deg, #FFFFFF 0%, #EAFBF7 100%);
}

.currency {
  font-size: 44 rpx;
  color: #000;
}

.amount {
  font-size: 72 rpx;
  color: #000;
  font-weight: 600;
}

.input-card {
  margin: 20 rpx 30 rpx;
}

/* 抬头选择框 */
.selector-box {
  border: 2 rpx solid #1DCFB7;
  border-radius: 16 rpx;
  background-color: #fff;
  padding: 24 rpx;
  margin: -40px 30 rpx 0;
  position: relative;
  z-index: 10;
}

.selector-label {
  font-size: 26 rpx;
  color: #7A7A7C;
}

.selector-content {
  margin-top: 12 rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.selector-value {
  font-size: 28 rpx;
  color: #333;
}

/* 分组卡片 */
.card-section {
  margin-top: 20 rpx;
  /* background-color: #fff; */
  border-radius: 16 rpx;
  overflow: hidden;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24 rpx 24 rpx;
  border-bottom: 2 rpx solid #F2F2F2;
}

.row:last-child {
  /* border-bottom: none; */
}

.label {
  font-size: 28 rpx;
  color: #9A9A9A;
}

.value {
  font-size: 28 rpx;
  color: #333;
}

.type-options {
  display: flex;
  align-items: center;
  gap: 28 rpx;
}

.type-item {
  display: flex;
  align-items: center;
  gap: 12 rpx;
}

.type-text {
  font-size: 28 rpx;
  color: #333;
}

.column {
  flex-direction: column;
  align-items: stretch;
}

.row-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sub-tip {
  font-size: 24 rpx;
  color: #9A9A9A;
  padding-top: 8 rpx;
  text-align: right;
}

/* 底部栏：金额行 + 满宽圆角按钮 */
.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 5%;
  display: flex;
  flex-direction: column;
  gap: 20 rpx;
  padding: 20 rpx 30 rpx calc(30rpx + env(safe-area-inset-bottom));
  background-color: #fff;
  border-top: 2 rpx solid #EDEDED;
}

.bottom-amount-line {
  width: 100%;
  font-size: 26 rpx;
  color: #999;
}

.amount-label {
  color: #999;
}

.amount-value {
  color: #333;
  font-weight: 600;
}

.submit-btn {
  width: 100%;
  height: 88 rpx;
  line-height: 88 rpx;
  text-align: center;
  color: #fff;
  background-color: #1DCFB7;
  border-radius: 44 rpx;
  font-size: 30 rpx;
  border: none;
}
</style>
